<template>
  <div class="orgStructure-page page-box-row-left padding-20">
    <!-- 组织架构 -->
    <FormBlock class="orgStructure" :title="$t('module.orgManage.orgStructure')" direction="column" style="width: 28%">
      <Select
        filterable
        v-model="applicationCode"
        placeholder="请选择应用"
        @on-change="appChange"
        style="margin: auto; display: block"
      >
        <Option v-for="item in appList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <!-- 树 -->
      <div class="tree-box">
        <el-tree
          style="margin-top: 0; padding: 6px 12px"
          :data="baseData"
          lazy
          :load="loadData"
          :props="defaultProps"
          highlight-current
          :indent="16"
          node-key="nodeId"
          ref="orgTree"
          icon-class="ivu-icon-ios-arrow-forward"
          @node-click="handleNodeClick"
          :render-content="renderContent"
          :expand-on-click-node="false"
        ></el-tree>
      </div>
    </FormBlock>
    <FormBlock class="orgInformation" :title="$t('module.orgManage.orgInformation')" direction="column">
      <div class="orgInformation-box">
        <div class="item-box" v-for="(item, index) in detailList" :key="index">
          <span class="lable-box">{{ item.label }}：</span>
          <span class="value-box">{{ item.value }}</span>
        </div>
      </div>
      <div v-if="!detailList.length" class="no-data">暂无数据</div>
      <div slot="tool-bar" class="table-bar btn-box">
        <RPButton text="显示字段" @click="showColumnsClick" />
      </div>
    </FormBlock>
  </div>
</template>

<script>
import locales from "../orgManage/locales.js";
import API from "@/api/orgManageTwo";
import { CoreModuleName } from "@/const";
import ShowColumns from "@/components/common/ShowColumns.vue";
export default {
  name: "indexTwo",
  components: {},
  props: {},
  mixins: [locales],
  data() {
    const { userInfo } = $store.state[CoreModuleName];
    return {
      currTenantCode: userInfo.tenantCode || "", //租户编码
      applicationCode: "",
      appList: [],
      baseData: [],
      showColKeyList: [],
      detailList: [],
      columnsList: [],
      defaultProps: {
        children: "childrenDept",
        label: "nodeName"
      },
      query: {
        orgPath: "",
        orgTypeFilter: 1
      },
      nodeId: "",
      embedSvg: orgType => {
        let svgUrl;
        switch (+orgType) {
          case 1:
            svgUrl = "static\\images\\enterprise.svg";
            break;
          case 2:
            svgUrl = "static\\images\\company.svg";
            break;
          case 10:
            svgUrl = "static\\images\\department.svg";
            break;
          default:
            svgUrl = "";
        }
        return svgUrl;
      }
    };
  },
  created() {},
  mounted() {
    this.findApplicationPage();
  },
  methods: {
    async showColumnsClick() {
      let res = await this.getFieldList();
      console.log(res, "res");
      if (!res) return;
      new this.$pageModal(
        ShowColumns,
        {
          props: {
            list: this.columnsList,
            initColKeyList: this.showColKeyList,
            title: '显示字段'
          }
        },
        data => {
          console.log(data, "data");
          if (data) {
            this.showColKeyList = data;
            this.handleNodeClick({ nodeId: this.nodeId });
          }
        }
      );
    },
    async getFieldList() {
      if (!this.applicationCode) {
        this.$message.error({
          content: "请选择应用",
          duration: 3
        });
        return false;
      }
      await API.getFieldList({
        tenantCode: this.currTenantCode,
        applicationCode: this.applicationCode
      }).then(res => {
        if (res.code == 200) {
          this.columnsList = res.data || [];
        }
      });
      return true;
    },
    getOrgTree() {
      let param = {
        applicationCode: this.applicationCode,
        parantNodeId: "",
        tenantCode: this.currTenantCode,
        conditionList: [],
        showColKeyList: []
      };
      API.getOrgTree(param).then(res => {
        if (res.code === 200) {
          this.baseData = res.data;
          this.$nextTick(function () {
            this.selectFirstOrg();
            this.$refs.orgTree.store.lazy = true;
          });
        }
      });
    },
    // 第一个选中的节点
    selectFirstOrg() {
      if (this.baseData.length > 0) {
        let firstOrgInfo = this.baseData[0];
        let { nodeId } = firstOrgInfo;
        // 当前行加选中效果
        this.$refs["orgTree"].setCurrentKey(nodeId);
        this.handleNodeClick({ nodeId });
      } else {
        this.detailList = []
      }
    },
    // Tree：树节点的内容区的渲染 Function，Function(h, { node, data, store }
    renderContent(h, { node, data, store }) {
      return (
        <span class="tree-item-box">
          <embed src={this.embedSvg(2)} width="10" height="10" type="image/svg+xml" class="node-svg" />
          <span class="node-label" title={data.nodeName}>
            {data.nodeName}
          </span>
        </span>
      );
    },
    // Tree：节点被点击时的回调
    handleNodeClick(data) {
      this.nodeId = data.nodeId;
      let param = {
        applicationCode: this.applicationCode,
        dataRowId: data.nodeId,
        showColKeyList: this.showColKeyList,
        tenantCode: this.currTenantCode
      };
      API.getDetail(param).then(res => {
        console.log(res, "getDetail");
        if (res.code == 200) {
          let { colKeyList, colShowNameVoList, records } = res.data;
          this.showColKeyList = colKeyList;
          let list = [];
          colShowNameVoList.forEach(item => {
            list.push({
              label: item.colName,
              value: records[0][item.colKey]
            });
          });
          this.detailList = list;
        }
      });
    },
    findApplicationPage() {
      API.findApplicationPage({
        commonPageDTO: { currentPage: 1, pageSize: 99999999, recordCount: 0 },
        sortDTO: { fieldName: "", orderBy: "" },
        pageNum: 1,
        pageSize: 99999999,
        clientId: "",
        appName: "",
        tenantCode: null,
        enabled: "", //"1",
        condition: { clientId: "", appName: "", tenantCode: null, enabled: "1" }
      }).then(data => {
        if (data && data.records) {
          API.getOpenMainAppList({
            tenantCode: this.currTenantCode
          }).then(openData => {
            if (openData.code == 200) {
              let openListId = openData.data.map(item => item.applicationCode);
              this.appList = data.records
                .filter(item => openListId.includes(item.clientId))
                .map(item => {
                  return {
                    label: item.appName,
                    value: `${item.clientId}`
                  };
                });
              if (this.appList.length) {
                this.applicationCode = this.appList[0].value;
                this.$nextTick(() => {
                  this.getOrgTree();
                });
              }
            }
          });
        }
      });
    },
    appChange() {
      this.getOrgTree();
    },
    loadData(node, resolve) {
      if (node.level == 0) {
        // 隐藏根节点
        return;
      }
      // 是叶子节点不进行查询
      if (node.isLeaf) {
        resolve([]);
      }
      let param = {
        applicationCode: this.applicationCode,
        parantNodeId: node.data.nodeId,
        tenantCode: this.currTenantCode,
        conditionList: [],
        showColKeyList: []
      };
      API.getOrgTree(param).then(res => {
        if (res.code === 200) {
          resolve(res.data);
        }
      });
    }
  },
  computed: {},
  watch: {}
};
</script>

<style lang='less'>
.orgStructure-page {
  .search-box {
    width: 94%;
    margin: auto auto 10px;
    display: block;
  }
  // .dept-table-box {
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // }
  // 组织架构
  height: 100%;
  .orgStructure {
    .ivu-select-dropdown {
      max-height: 330px !important;
      .ivu-select-dropdown-list {
        width: fit-content;
        .ivu-select-item:hover {
          background: #fff !important;
        }
      }
    }
    .ivu-select {
      width: 94% !important;
    }
    .node-svg {
      position: relative;
      top: 1px;
    }
    .node-label {
      margin-left: 3px;
      display: inline-block;
      // width: calc(~"100% - 46px");
      width: 80%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  // 组织信息
  .orgInformation {
    .block-body {
      overflow: initial;
    }
    // 组织
    .org {
      .ivu-row:nth-child(1) {
        .ivu-col:nth-child(2) {
          .ivu-form-item {
            .ivu-form-item-content {
              .ivu-icon {
                font-size: 22px;
                color: #ff6f4b;
              }
            }
          }
        }
      }
      .ivu-row:nth-child(2) {
        .ivu-col:nth-child(2) {
          .ivu-form-item {
            .ivu-form-item-content {
              display: flex;
              .ivu-btn {
                padding: 3px 9px;
                margin-left: 10px;
              }
            }
          }
        }
      }
      .ivu-row:nth-child(6) {
        .ivu-col {
          .ivu-btn {
            background-color: #ff6f4b;
            border-color: #ff6f4b;
          }
          .ivu-btn:nth-child(1) {
            margin-right: 14px;
          }
        }
      }
    }
    // 部门
    .dept {
      .deptTitle {
        font-size: 14px;
        height: 46px;
        line-height: 46px;
        padding-left: 10px;
        background-color: #f5f5f5;
      }
      .deptContent {
        margin: 10px 0;
        .ivu-select {
          margin-bottom: 10px;
        }
        .el-table {
          .el-table__header-wrapper {
            thead {
              tr {
                th {
                  background: #f5f5f5 !important;
                }
              }
            }
          }
        }
      }
    }
  }
  .tree-item-box {
    position: relative;
    width: 93% !important;
    display: flex;
    align-items: center;
    .orgEditMenu {
      position: absolute;
      right: 10px;
      top: -2px;
    }
  }
}
</style>
<style lang="less" scoped>
.orgInformation-box {
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  .item-box {
    display: flex;
    width: 50%;
    margin: 10px 0;
    .lable-box {
      // width: 80px;
    }
    .value-box {
      flex: 1;
    }
  }
}
.no-data {
  margin-top: 20px;
  text-align: center;
  color: #909399;
}
.btn-box {
  position: absolute;
  right: 10px;
  top: 0;
}
.orgStructure-page .orgInformation /deep/.block-body{
  overflow: auto;
}
</style>
